<template>
  <div style="text-align: center; padding: 60px 20px;">
    <!-- 主标题 -->
    <h1 style="color: #409EFF; font-size: 3rem; margin-bottom: 20px; font-weight: 700; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
      欢迎使用法律信息服务平台
    </h1>
    
    <!-- 副标题 -->
    <p style="color: #606266; font-size: 1.3rem; max-width: 800px; margin: 0 auto 50px; line-height: 1.6;">
      专业的法律咨询与条文查询平台，为您提供全面、准确的法律信息服务，让法律触手可及
    </p>

    <!-- 功能特性展示 -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto 60px;">
      <div style="padding: 30px; background: rgba(255, 255, 255, 0.9); border-radius: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);">
        <el-icon size="60" style="color: #67C23A; margin-bottom: 20px;"><ChatDotRound /></el-icon>
        <h3 style="color: #409EFF; font-size: 1.5rem; margin-bottom: 15px;">智能法律咨询</h3>
        <p style="color: #606266; line-height: 1.6;">专业的法律AI助手，为您解答各类法律问题，提供准确的法律建议</p>
      </div>

      <div style="padding: 30px; background: rgba(255, 255, 255, 0.9); border-radius: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);">
        <el-icon size="60" style="color: #E6A23C; margin-bottom: 20px;"><Document /></el-icon>
        <h3 style="color: #409EFF; font-size: 1.5rem; margin-bottom: 15px;">法律条文查询</h3>
        <p style="color: #606266; line-height: 1.6;">快速检索各类法律法规，精准定位相关条文，支持多种查询方式</p>
      </div>

      <div style="padding: 30px; background: rgba(255, 255, 255, 0.9); border-radius: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);">
        <el-icon size="60" style="color: #F56C6C; margin-bottom: 20px;"><User /></el-icon>
        <h3 style="color: #409EFF; font-size: 1.5rem; margin-bottom: 15px;">专业可靠</h3>
        <p style="color: #606266; line-height: 1.6;">基于权威法律数据库，确保信息的准确性和时效性，为您提供可靠保障</p>
      </div>
    </div>

    <!-- 开始使用按钮 -->
    <div style="margin-bottom: 40px;">
      <p style="color: #909399; font-size: 1.1rem; margin-bottom: 20px;">选择您需要的服务开始使用</p>
      <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
        <el-button 
          type="primary" 
          size="large" 
          @click="goTo('chat')"
          style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; padding: 15px 30px; font-size: 1.1rem;"
        >
          <el-icon><ChatDotRound /></el-icon>
          开始法律咨询
        </el-button>
        
        <el-button 
          type="success" 
          size="large" 
          @click="goTo('law')"
          style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border: none; padding: 15px 30px; font-size: 1.1rem;"
        >
          <el-icon><Document /></el-icon>
          查询法律条文
        </el-button>
      </div>
    </div>

    <!-- 统计数据 -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 800px; margin: 0 auto; padding: 40px; background: rgba(255, 255, 255, 0.8); border-radius: 15px;">
      <div style="text-align: center;">
        <div style="font-size: 2.5rem; font-weight: bold; color: #409EFF; margin-bottom: 10px;">1000+</div>
        <div style="color: #606266;">法律条文</div>
      </div>
      <div style="text-align: center;">
        <div style="font-size: 2.5rem; font-weight: bold; color: #67C23A; margin-bottom: 10px;">5000+</div>
        <div style="color: #606266;">用户咨询</div>
      </div>
      <div style="text-align: center;">
        <div style="font-size: 2.5rem; font-weight: bold; color: #E6A23C; margin-bottom: 10px;">99%</div>
        <div style="color: #606266;">准确率</div>
      </div>
      <div style="text-align: center;">
        <div style="font-size: 2.5rem; font-weight: bold; color: #F56C6C; margin-bottom: 10px;">24/7</div>
        <div style="color: #606266;">在线服务</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ChatDotRound, Document, User } from '@element-plus/icons-vue'

const router = useRouter()

function goTo(module) {
  router.push({ path: `/${module}` })
}
</script>

<style scoped>
.el-button {
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem !important;
  }
  
  p {
    font-size: 1.1rem !important;
  }
  
  .el-button {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>
